<!DOCTYPE html>
<html lang="utf-8" xmlns:th="http://www.thymeleaf.org">
<head th:replace="include-common :: common-head(~{::title})">
    <title>target</title>
</head>
<head>
    <link rel="stylesheet" th:href="@{/static/css/pagination.css}">
    <link rel="stylesheet" th:href="@{/static/ztree/zTreeStyle.css}"/>
    <script type="text/javascript" th:src="@{/static/ztree/jquery.ztree.all-3.5.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/jquery/jquery.pagination.js}"></script>
    <script type="text/javascript"  src="/static/crowd/my-role.js"  charset="gb2312"></script>
    <script type="text/javascript">
        $(function(){
            window.pageNum = 1;
            window.pageSize = 5;
            window.keyword = "";
            generatePage();
            // 3.给查询按钮绑定单击响应函数
            $("#searchBtn").click(function(){
                // ①获取关键词数据赋值给对应的全局变量
                window.keyword = $("#keywordInput").val();
                // ②调用分页函数刷新页面
                generatePage();
            });

            // 4.点击新增按钮打开模态框
            $("#showAddModalBtn").click(function(){
                $("#addModal").modal("show");
            });

            // 5.给新增模态框中的保存按钮绑定单击响应函数
            $("#saveRoleBtn").click(function(){
            // ①获取用户在文本框中输入的角色名称
            // #addModal 表示找到整个模态框
            // 空格表示在后代元素中继续查找
            // [name=roleName]表示匹配 name 属性等于 roleName 的元素
            var roleName = $.trim($("#addModal [name=roleName]").val());
            // ②发送 Ajax 请求
            $.ajax({
                "url": "role/save.json",
                "type":"post",
                "data": {
                    "name": roleName
                },
                "dataType": "json",
                "success":function(response){
                    var result = response.operationResult;
                    if(result == "SUCCESS") {

                         layer.msg("操作成功！");
                         // 将页码定位到最后一页
                         window.pageNum = 99999999;
                         // 重新加载分页数据
                         generatePage();
                    }
                    if(result == "FAILED") {
                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function(response){
                        layer.msg(response.status+" "+response.statusText);
                }
            });
            // 关闭模态框
            $("#addModal").modal("hide");
            // 清理模态框
            $("#addModal [name=roleName]").val("");
            });

            // 使用 jQuery 对象的 on()函数可以解决上面问题
            // ①首先找到所有“动态生成”的元素所附着的“静态”元素
            // ②on()函数的第一个参数是事件类型
            // ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器
            // ③on()函数的第三个参数是事件的响应函数
            $("#rolePageBody").on("click",".pencilBtn",function(){
                // 打开模态框
                $("#editModal").modal("show");
                // 获取表格中当前行中的角色名称
                var roleName = $(this).parent().prev().text();
                // 获取当前角色的 id
                // 依据是：var pencilBtn = "<button id='"+roleId+"' ……这段代码中我们把 roleId 设置到id 属性了
                // 为了让执行更新的按钮能够获取到 roleId 的值，把它放在全局变量上
                window.roleId = this.id;
                // 使用 roleName 的值设置模态框中的文本框
                $("#editModal [name=roleName]").val(roleName);
            });

            // 7.给更新模态框中的更新按钮绑定单击响应函数
            $("#updateRoleBtn").click(function(){
                // ①从文本框中获取新的角色名称
                var roleName = $("#editModal [name=roleName]").val();
                // ②发送 Ajax 请求执行更新
                $.ajax({
                    "url":"role/update.json",
                    "type":"post",
                    "data":{
                        "id":window.roleId,
                        "name":roleName
                    },
                    "dataType":"json",
                    "success":function(response){
                        var result = response.operationResult;
                        if(result == "SUCCESS") {
                            layer.msg("操作成功！");
                            // 重新加载分页数据
                            generatePage();
                        }
                        if(result == "FAILED") {
                            layer.msg("操作失败！"+response.message);
                        }
                    },
                    "error":function(response){
                        layer.msg(response.status+" "+response.statusText);
                    }
                });
                // ③关闭模态框
                $("#editModal").modal("hide");
            });

            // var roleArray = [{roleId:5,roleName:"aaa"},{roleId:5,roleName: "bbbb"}];
            // showConfirmModal(roleArray);

            $("#removeRoleBtn").click(function(){
                // 获取全局变量的roleIdArray数组，转换为json字符串
               let requestBody = JSON.stringify(window.roleIdArray);
                console.log(requestBody)
                $.ajax({
                    "url":"remove/by/role/id/array.json",
                    "type":"post",
                    "data":requestBody,
                    "contentType":"application/json;charset=UTF-8",
                    "dataType":"json",
                    "success":function(response){
                        var result = response.operationResult;
                        if(result == "SUCCESS") {
                            layer.msg("操作成功！");
                            // 重新加载分页数据
                            generatePage();
                        }
                        if(result == "FAILED") {
                            layer.msg("操作失败！"+response.message);
                        }
                    },
                    "error":function(response){
                        layer.msg(response.status+" "+response.statusText);
                    }
                });
                // ③关闭模态框
                $("#confirmModal").modal("hide");
                // 取消全选框的选中状态
                $("#summaryBox").prop("checked", false);

            });

            // 9.给单条删除按钮绑定单击响应函数
            $("#rolePageBody").on("click",".removeBtn",function(){
                // 创建role对象存入数组

                // 从当前按钮出发获取角色名称
                let roleName = $(this).parent().prev().text();

                let roleArray = [{
                    roleId:this.id,
                    roleName:roleName
                }]

                // 调用专门的函数 打开模态框
                showConfirmModal(roleArray);
            });

            // 10.给总的checkbox绑定单击响应函数
            $("#summaryBox").click(function () {
                // ①获取当前多选框状态
                var currentStatus = this.checked;

                // ②用当前多选框的状态设置其他多选框
                $(".itemBox").prop("checked", currentStatus);


            })

            // 11.全选、全不选的反向操作
            $("#rolePageBody").on("click",".itemBox",function(){

                // 获取当前已经选中的.itemBox的数量
                var checkedBoxCount = $(".itemBox:checked").length;

                // 获取全部.itemBox的数量
                var totalBoxCount = $(".itemBox").length;

                // 使用二者的比较结果设置总的checkbox
                $("#summaryBox").prop("checked", checkedBoxCount == totalBoxCount);

            });

            // 12.给批量删除的按钮绑定单击响应函数
            $("#batchRemoveBtn").click(function (){

                // 创建一个数组对象用来存放后面获取到的角色对象
                var roleArray = [];

                // 遍历当前选中的多选框
                $(".itemBox:checked").each(function (){

                    // 使用this引用当前遍历得到的多选框
                    var roleId = this.id;

                    // 通过DOM操作获取角色名称
                    var roleName = $(this).parent().next().text();

                    roleArray.push({
                        "roleId":roleId,
                        "roleName":roleName
                    });
                });
                // 检查roleArray的长度
                if (roleArray.length == 0){
                    layer.msg("请至少选择一个执行删除");
                    return ;
                }

                // 调用专门的函数打开模态框
                showConfirmModal(roleArray);
            });

            // 13.给分配权限按钮绑定单击响应函数
            $("#rolePageBody").on("click",".checkBtn",function(){

                // 打开模态框
                $("#assignModal").modal("show");

                // 在模态框中装载树 Auth 的形结构数据
                window.roleId=this.id;
                fillAuthTree();

            });

            // 14.给分配权限模态框中的“分配”按钮绑定单击响应函数
            $("#assignBtn").click(function(){
                // ①收集树形结构的各个节点中被勾选的节点
                // [1]声明一个专门的数组存放 id
                var authIdArray = [];
                // [2]获取 zTreeObj 对象
                var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
                // [3]获取全部被勾选的节点
                var checkedNodes = zTreeObj.getCheckedNodes();
                // [4]遍历 checkedNodes
                for(var i = 0; i < checkedNodes.length; i++) {
                    var checkedNode = checkedNodes[i];
                    var authId = checkedNode.id;
                    authIdArray.push(authId);
                }
                // ②发送请求执行分配
                var requestBody = {
                    "authIdArray":authIdArray, // 为了服务器端 handler 方法能够统一使用 List<Integer>方式接收数据，roleId 也存入数组
                    "roleId":[window.roleId]
                };
                requestBody = JSON.stringify(requestBody);
                $.ajax({
                    "url":"/assign/do/role/assign/auth.json",
                    "type":"post",
                    "data":requestBody,
                    "contentType":"application/json;charset=UTF-8",
                    "dataType":"json",
                    "success":function(response){
                        var result = response.operationResult;
                        if(result == "SUCCESS") {
                            layer.msg("操作成功！");
                        }
                        if(result == "FAILED") {
                            layer.msg("操作失败！"+response.operationMessage);
                        }
                    },
                    "error":function(response) {
                        layer.msg(response.status+" "+response.statusText);
                    }
                });
                $("#assignModal").modal("hide");
            });

            // 15.给分配菜单按钮绑定单击响应函数
            $("#rolePageBody").on("click",".infoBtn",function(){
                // 打开模态框
                $("#menuModal").modal("show");
                // 在模态框中装载树 Auth 的形结构数据
                window.roleId=this.id;
                fillMenuTree();
            });

            // 16.给分配菜单模态框中的“分配”按钮绑定单击响应函数
            $("#menuBtn").click(function(){
                // ①收集树形结构的各个节点中被勾选的节点
                // [1]声明一个专门的数组存放 id
                var menuIdArray = [];
                // [2]获取 zTreeObj 对象
                var zTreeObj = $.fn.zTree.getZTreeObj("menuTreeDemo");
                // [3]获取全部被勾选的节点
                var checkedNodes = zTreeObj.getCheckedNodes();
                // [4]遍历 checkedNodes
                for(var i = 0; i < checkedNodes.length; i++) {
                    var checkedNode = checkedNodes[i];
                    var menuId = checkedNode.id;
                    menuIdArray.push(menuId);
                }
                // ②发送请求执行分配
                var requestBody = {
                    "menuIdArray":menuIdArray, // 为了服务器端 handler 方法能够统一使用 List<Integer>方式接收数据，menuId 也存入数组
                    "roleId":[window.roleId]
                };
                requestBody = JSON.stringify(requestBody);
                $.ajax({
                    "url":"/assign/do/role/assign/menu.json",
                    "type":"post",
                    "data":requestBody,
                    "contentType":"application/json;charset=UTF-8",
                    "dataType":"json",
                    "success":function(response){
                        var result = response.operationResult;
                        if(result == "SUCCESS") {
                            layer.msg("操作成功！");
                        }
                        if(result == "FAILED") {
                            layer.msg("操作失败！"+response.operationMessage);
                        }
                    },
                    "error":function(response) {
                        layer.msg(response.status+" "+response.statusText);
                    }
                });
                $("#menuModal").modal("hide");
            });

        });
    </script>
</head>
<body>


<div th:replace="include-common :: common-nav"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="include-common :: common-sidebar"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button id="searchBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button type="button" id="batchRemoveBtn"  class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" id="showAddModalBtn" class="btn btn-primary" style="float:right;" ><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input id="summaryBox" type="checkbox"></th>
                                <th>名称</th>
                                <th width="129">操作</th>
                            </tr>
                            </thead>
                            <tbody id="rolePageBody">
                            <tr>
                                <td>1</td>
                                <td><input type="checkbox"></td>
                                <td>PM - 项目经理</td>
                                <td>
                                    <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
                                    <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                                    <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination">
                                        <!--                                            <span class="current prev">Prev</span>-->
                                        <!--                                            <span class="current">1</span>-->
                                        <!--                                            <a href="#">2</a>-->
                                        <!--                                            <a href="#">3</a>-->
                                        <!--                                            <a href="#">4</a>-->
                                        <!--                                            <span>...</span>-->
                                        <!--                                            <a href="#">8</a>-->
                                        <!--                                            <a href="#" class="next">Next</a>-->
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框-新增 -->
<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input
                                type="text" name="roleName"
                                class="form-control" id="inputSuccess4" placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveRoleBtn" type="button" class="btn btn-primary"> 保 存
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 模态框-删除 -->
<div id="editModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input
                                type="text" name="roleName" class="form-control" placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="updateRoleBtn" type="button" class="btn btn-success"> 更 新
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 模态框-修改 -->
<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <h4>请确认是否要删除下列角色</h4>
                <div id="roleNameDiv" style="text-align: center"></div>
            </div>
            <div class="modal-footer">
                <button id="removeRoleBtn" type="button" class="btn btn-success">确认删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 模态框-权限 --->
<div id="assignModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <ul id="authTreeDemo" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button id="assignBtn" type="button" class="btn btn-primary">好的，我设置好了！执行分配！
                </button>
            </div>
        </div>
    </div>
</div>

<div id="menuModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <ul id="menuTreeDemo" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button id="menuBtn" type="button" class="btn btn-primary">好的，我设置好了！执行分配！
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>